<template>
  <div>
    <el-button type="primary" size="small" @click="inserMethods">新增员工</el-button>
    <el-button type="primary" size="small" @click="deleteAll">批量删除</el-button>

    <InputList ref="inputs" :inputForms="inputForms" :dialogTitle="dialogTitle" :showDialog.sync="showDialog"
      :editConfirm="editConfirm" :inserConfirm="inserConfirm" :view="view">
    </InputList>

    <TableList ref="tables" :tableData="tableData" :renderTables="renderTables" :types="types" :batchDelete="batchDelete"
      :tableList="tableList" :viewMethods="viewMethods" :viewDetails="viewDetails">
    </TableList>
  </div>
</template>

<script>
// 引入列表渲染的字段
import { tableList } from '@/utils/field.js'
export default {
  name: 'ApprovePage',
  data () {
    return {
      // 以下是表单
      // 必传：声明表单弹框的标题
      dialogTitle: '',
      // 必传：表单弹框的开关
      showDialog: false,
      // 必传：声明一个表单参数
      inputForms: [
        {
          label: '姓名',
          value: 'username',
          type: 'text'
        },
        {
          label: '性别',
          value: 'gender',
          type: 'select',
          seleclist: [
            {
              label: '男',
              value: 1
            },
            {

              label: '女',
              value: 0
            }
          ]
        },
        {
          label: '手机号',
          value: 'mobile',
          type: 'number'
        },
        {
          label: '工号',
          value: 'workNumber',
          type: 'text'
        },
        {
          label: '聘用形式',
          value: 'formOfEmployment',
          type: 'text'
        },
        {
          label: '部门名字',
          value: 'departmentName',
          type: 'text'
        },
        {
          label: '入职日期',
          value: 'timeOfEntry',
          type: 'time'
        },
        {
          label: '转正日期',
          value: 'correctionTime',
          type: 'time'
        },
        {
          label: '更新时间',
          value: 'updateTime',
          type: 'timedate'
        }
      ],
      // 点击的是查看，那么久没有确定按钮
      view: false,

      // 以下是列表
      // 必传：列表渲染的字段
      renderTables: tableList.get('renderTables'),
      // 必传：列表展示的信息
      tableData: [],
      // 必传：控制列表的操作按钮
      types: {
        operate: true,
        download: false,
        imports: false,
        view: true,
        edit: true,
        del: true
      }
    }
  },
  methods: {
    // ★---------------------表单类方法---------------------★

    // 点击新增按钮
    inserMethods () {
      this.showDialog = true
      this.dialogTitle = '新增信息'
      this.view = false
    },
    // 点击编辑按钮
    viewMethods (currentValue) {
      this.showDialog = true
      this.dialogTitle = '编辑信息'
      this.view = false
      // 调用详情接口
      // const res = await xxxx(currentValue.id)
      // 将数据给子组件的表单，进行回显
      this.$refs.inputs.allForms = {
        id: 1,
        correctionTime: '2023-07-18',
        departmentName: '1',
        formOfEmployment: '1',
        gender: '1',
        mobile: '1',
        timeOfEntry: '2023-07-12',
        updateTime: [
          '2023-07-20 00:00:00',
          '2023-07-21 00:00:00'
        ],
        username: '测试',
        workNumber: 'A0120'
      }
    },
    // 新增确定
    inserConfirm () {
      // 调用新增接口
      // const res = await xxx(this.$refs.inputs.allForms)
      console.log(this.$refs.inputs.allForms, 'this.$refs.inputs.allForms')
      // if(res.code == 200) {
      // xxxx新增成功的回调
      // .......
      this.$refs.inputs.closeMethod()
      // }
      console.log('新增确定')
    },
    // 编辑确定
    editConfirm () {
      // 调用编辑接口
      // const res = await xxx(this.$refs.inputs.allForms)
      // if(res.code == 200) {
      // xxxx编辑成功的回调
      // .......
      this.$refs.inputs.closeMethod()
      // }
      console.log('编辑成功')
    },

    // ★---------------------table列表展示方法---------------------★

    // 查询table列表
    tableList () {
      this.tableData = [
        {
          id: 1,
          name: '张三',
          age: 18,
          gender: '男',
          idCard: '130434200003050123'
        },
        {
          id: 2,
          name: '王五',
          age: 18,
          gender: '男',
          idCard: '130434200003050123'
        },
        {
          id: 3,
          name: '老六',
          age: 18,
          gender: '男',
          idCard: '130434200003050123'
        },
        {
          id: 4,
          name: '切尔西',
          age: 18,
          gender: '男',
          idCard: '130434200003050123'
        },
        {
          id: 5,
          name: '富婆',
          age: 38,
          gender: '女',
          idCard: '130434200003050123'
        }
      ]
    },
    // 点击批量删除按钮
    deleteAll () {
      this.$refs.tables.allDel()
    },
    /**
     * 删除接口/批量删除的接口 加async
     * @param {String} ids 批量删除或者是删除的id
     */
    batchDelete (ids) {
      // const res = await batchAPI({ids:ids})
      console.log('这是批量删除接口/删除接口')
    },
    /**
     * 查看详情
     * @param {Number} id 查看详情id
     */
    viewDetails (id) {
      this.showDialog = true
      this.dialogTitle = '查看信息'
      this.view = true
      // const res = await details(id)
      // if (res.code === 200) {
      this.$refs.inputs.allForms = {
        id: 1,
        correctionTime: '2023-07-18',
        departmentName: '1',
        formOfEmployment: '1',
        gender: '1',
        mobile: '1',
        timeOfEntry: '2023-07-12',
        updateTime: [
          '2023-07-20 00:00:00',
          '2023-07-21 00:00:00'
        ],
        username: '测试',
        workNumber: 'A0120'
      }
      setTimeout(() => {
        console.log('这是查看详情接口')
        this.$refs.inputs.closeMethod()
      }, 1000)
      // }
    }
  },
  mounted () {
    this.tableList()
  }
}
</script>

<style lang="less" scoped></style>
